<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>后台管理</title>
		<link rel="stylesheet" type="text/css" href="plugin/font-awesome-4.7.0/css/font-awesome.min.css"/>
		<link rel="stylesheet" type="text/css" href="plugin/bootstrap3.3.7/css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="plugin/malihu-custom-scrollbar/jquery.mCustomScrollbar.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/admin.css" />
		
		<script src="plugin/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(function() {
 				var testObj = new AccordionMenu("#leftMenu");
 				//左侧滚动条
 				$.mCustomScrollbar.defaults.theme="inset";
    			$.mCustomScrollbar.defaults.scrollButtons.enable=true;
			    $(".left-container").mCustomScrollbar({
			    	mouseWheelPixels:60,
			        axis:"y",
			        autoHideScrollbar:true,
			        scrollInertia:200,
			        autoExpandScrollbar:true,
			        callbacks:{
				      onOverflowY:function(){
				      	$(".mCSB_container",this).css("margin-right","5px");
				      },
				      onOverflowYNone:function(){
				      	$(".mCSB_container",this).css("margin-right","0px");
					  }
					}
			    });
			});	
			
			function AccordionMenu(selector){
				//顶部菜单ul
				this.mainMenu=$(selector); 
				this.autoFold=false; //自动收缩菜单
				this.autoFoldBrotherMenu=false; //自动收缩兄弟节点子菜单
				this.init();
			};
			AccordionMenu.prototype={
				constructor:AccordionMenu,
				init:function(){
					var self = this;
					//增加菜单点击监听事件
					$("li > a",self.mainMenu).click(function(){
 						$("li.active",self.mainMenu).removeClass("active");
 						var liSelf=$(this).parent();
 						liSelf.addClass("active");
 						var ul = liSelf.children("ul"); 						
 						if(self.autoFold && (ul.size() || (self.autoFoldBrotherMenu && liSelf.parent().find("li.open").size()))){
	 						$("li.open",self.mainMenu).filter(function(){
	 							return !liSelf.parents("li").is($(this)) && !$(this).is(liSelf);
	 						}).removeClass("open").children("ul").hide(200);
	 					}
 					});
 					
 					//初始化下拉菜单
					this.initDropdownMenu(self.mainMenu);
				},
				initDropdownMenu:function(menuObj,deep){
					if(deep==null) deep=0;
					var menus = menuObj.children("li");
					var menu = menus.children("a");
					menu.css("padding-left",menu.children("i").width()*deep);
					var self = this;
					menus.children("ul").each(function(){
						var ulSelf=$(this);
						var m = $(this).parent().children("a");
						m.click(function(){
							if($(this).parent().hasClass("open")){
								ulSelf.hide(200);
							}else{
								ulSelf.show(200);
							};
							$(this).parent().toggleClass("open");
							
						});
						self.initDropdownMenu($(this),deep+1);
					});
				}
				
			};
		</script>
	</head>

	<body>
		<div class="container-fluid" style="padding: 0px;">
			<!--顶部菜单  开始-->
			<div>
				<nav class="navbar navbar-default ms-navbar">
					<div class="container-fluid">
						<div class="navbar-header">
							<!--
							<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
						        <span class="icon-bar"></span>
						        <span class="icon-bar"></span>
						        <span class="icon-bar"></span>
      						</button>
      						-->
							<a class="navbar-brand" href="#">
								<img class="logo" src="img/logo.svg?20171024">
								<span>管理中心</span>
							</a>
						</div>

						<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
							<ul class="nav navbar-nav">
								<li class="active">
									<a href="#">首页</a>
								</li>
								<li>
									<a href="#">用户</a>
								</li>
								<li>
									<a href="#">设置</a>
								</li>
							</ul>

							<ul class="nav navbar-nav navbar-right">
								<li>
									<a href="#" title="消息" >
										<i class="fa fa-bell-o fa-lg">
											<span class="badge" >45</span>
										</i>
										
									</a>
								</li>
								<li class="dropdown">
									<a href="#" class="dropdown-toggle btn-img" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
										<img src="img/head.jpg" alt="..." class="img-rounded">
										<!--<span class="caret"></span>-->
									</a>
									<ul class="dropdown-menu ms-icon-menu">
										<li>
											
											<a href="#"><i class="fa fa-bell-o fa-lg"></i>个人中心</a>
											
										</li>
										<li>
											
											<a href="#"><i class="fa fa-bell-o fa-lg"></i>个人设置</a>
										</li>
										<li role="separator" class="divider"></li>
										<li>
											
											<a href="#"><i class="fa fa-power-off fa-lg"></i>安全退出</a>
										</li>
										<li>
											
											<a href="#"><i></i>个人中心123456</a>
										</li>
									</ul>
								</li>
							</ul>
						</div>
					</div>
				</nav>
			</div>
			<!--顶部菜单  结束-->
			<!--下方区域  开始-->
			<div class="no-padding-container down-container">
				<!--左侧区域 开始-->
				<div class="left-container test-flag">
                    	<ul id="leftMenu" class="accordion-menu ms-icon-menu">
							<li id="test" >
								<a><i class="glyphicon glyphicon-cloud"></i><span>测试</span></a>
							</li>
							<li id="test_dialog" class="active">
								<a><i class="glyphicon glyphicon-cloud"></i><span>测试-弹窗</span></a>
							</li>
							<li id="test_dialog" >
								<a><i></i><span>测试-弹窗11111111111111111111111111111</span></a>
							</li>
							
							<li id="test_dialog" >
								<a><i></i><span>多级菜单弹窗11111111111111111111111弹窗11111111111111111111111</span></a>
								<span class="glyphicon glyphicon-menu-down"></span>
								<ul class="accordion-menu" >
									<li>
										<a><i class="glyphicon glyphicon-cloud"></i><span>子菜单1</span></a>
									</li>
									<li>
										<a><i></i><span>子菜单2</span></a>
										<span class="glyphicon glyphicon-menu-down"></span>
										<ul class="accordion-menu" >
											<li id="test" >
												<a><i class="glyphicon glyphicon-cloud"></i><span>测试</span></a>
											</li>
											<li id="test_dialog" class="active">
												<a><i class="glyphicon glyphicon-cloud"></i><span>测试-弹窗</span></a>
											</li>
											<li id="test_dialog" >
												<a><i></i><span>测试-弹窗11111111111111111111111111111</span></a>
											</li>
										
											<li id="test_dialog" >
												<a><i></i><span>多级菜单弹窗11111111111111111111111弹窗11111111111111111111111</span></a>
												<span class="glyphicon glyphicon-menu-down"></span>
												<ul class="accordion-menu" >
													<li>
														<a><i class="glyphicon glyphicon-cloud"></i><span>子菜单1</span></a>
													</li>
													<li>
														
														<a><i></i><span>子菜单2</span></a>
													</li>
												</ul>
											</li>
										</ul>
									</li>
								</ul>
							</li>
							 
                            	 
                            
							<li id="test" >
								<a><i class="glyphicon glyphicon-cloud"></i><span>测试</span></a>
							</li>
							<li id="test_dialog" >
								<a><i class="glyphicon glyphicon-cloud"></i><span>测试-弹窗</span></a>
							</li>
							<li id="test_dialog" >
								<a><i></i><span>测试-弹窗11111111111111111111111111111</span></a>
							</li>
							
							<li id="test_dialog" >
								<a><i></i><span>多级菜单弹窗11111111111111111111111弹窗11111111111111111111111</span></a>
								<span class="glyphicon glyphicon-menu-down"></span>
								<ul class="accordion-menu" >
									<li>
										<a><i class="glyphicon glyphicon-cloud"></i><span>子菜单1</span></a>
									</li>
									<li>
										
										<a><i></i><span>子菜单2</span></a>
									</li>
								</ul>
							</li>
							<li id="test" >
								<a><i class="glyphicon glyphicon-cloud"></i><span>测试</span></a>
							</li>
							<li id="test_dialog" >
								<a><i class="glyphicon glyphicon-cloud"></i><span>测试-弹窗</span></a>
							</li>
							<li id="test_dialog" >
								<a><i></i><span>测试-弹窗11111111111111111111111111111</span></a>
							</li>
							
							<li id="test_dialog" >
								<a><i></i><span>多级菜单弹窗11111111111111111111111弹窗11111111111111111111111</span></a>
								<span class="glyphicon glyphicon-menu-down"></span>
								<ul class="accordion-menu" >
									<li>
										<a><i class="glyphicon glyphicon-cloud"></i><span>子菜单1</span></a>
									</li>
									<li>
										
										<a><i></i><span>子菜单2</span></a>
									</li>
								</ul>
							</li>
							<li id="test" >
								<a><i class="glyphicon glyphicon-cloud"></i><span>测试</span></a>
							</li>
							<li id="test_dialog" >
								<a><i class="glyphicon glyphicon-cloud"></i><span>测试-弹窗</span></a>
							</li>
							<li id="test_dialog" >
								<a><i></i><span>测试-弹窗11111111111111111111111111111</span></a>
							</li>
							
							<li id="test_dialog" >
								<a><i></i><span>多级菜单弹窗11111111111111111111111弹窗11111111111111111111111</span></a>
								<span class="glyphicon glyphicon-menu-down"></span>
								<ul class="accordion-menu" >
									<li>
										<a><i class="glyphicon glyphicon-cloud"></i><span>子菜单1</span></a>
									</li>
									<li>
										
										<a><i></i><span>子菜单2</span></a>
									</li>
								</ul>
							</li>
							<li id="test" >
								<a><i class="glyphicon glyphicon-cloud"></i><span>测试</span></a>
							</li>
							<li id="test_dialog">
								<a><i class="glyphicon glyphicon-cloud"></i><span>测试-弹窗</span></a>
							</li>
							<li id="test_dialog" >
								<a><i></i><span>测试-弹窗11111111111111111111111111111</span></a>
							</li>
							
							<li id="test_dialog" >
								<a><i></i><span>多级菜单弹窗11111111111111111111111弹窗11111111111111111111111</span></a>
								<span class="glyphicon glyphicon-menu-down"></span>
								<ul class="accordion-menu" >
									<li>
										<a><i class="glyphicon glyphicon-cloud"></i><span>子菜单1</span></a>
									</li>
									<li>
										<a><i></i><span>子菜单2</span></a>
									</li>
								</ul>
							</li>
							 
						</ul>
                	<div id="copyright"  class="text-center">(c) Copyright 2017 lvxi.<br> All Rights Reserved.</div>
				</div>
				<!--左侧区域 结束-->
				
				<!--右侧区域 开始-->
				<div class="test-flag2" >
					111
				</div>
				<!--右侧区域 结束-->
			</div>
			<!--下方区域  结束-->
		</div>
		
		<script src="plugin/bootstrap3.3.7/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="plugin/malihu-custom-scrollbar/jquery.mCustomScrollbar.concat.min.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>